<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12" :xs="24" class="of-auto">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>近七日访问次数统计</span>
          </div>
          <div ref="block1" style="height: 300px;width: 100%"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>请求健康状况</span>
          </div>
          <div ref="block2" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import * as echarts from "echarts";
import { getSevenCount,getAccessStatusCount } from '@/api/log'
export default {
  name: 'LogCount',
  components: {  },
  data() {
    return {
      statusMap: {
        'Success': '成功',
        'Login': '登录失败',
        'Token': 'token异常',
        'Captcha': '验证码错误',
        'Verify': '校验不通过',
        'RateLimiter': '请求被限流',
        'Lock': '获取锁失败',
        'Auth': '请求越权',
        'Session': '会话超时',
        'SystemError': '系统异常'
      },

      loading: true,
    }
  },
  computed: {

  },
  mounted() {
    this.initQuery()
  },
  methods: {
    initQuery() {
      Promise.all([getSevenCount(),getAccessStatusCount()])
      .then((r)=>{
        this.getSevenCount(r[0].data)
        this.getAccessStatusCount(r[1].data)
      }).finally(()=>this.loading = false)
    },
    getAccessStatusCount(res) {
      const myChart = echarts.init(this.$refs.block2);
      // 设置配置项
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 0,
          // left: 'center',
          data: res.column,
          selected:res.select
        },
        series: [
          {
            name:"请求健康状况",
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:res.data,
            itemStyle: {
              normal: {
                color: function (data) {
                  const s = data.name
                  if(s === "Success"){
                    return "green";
                  }else if (s === 'error') {
                    return "red"
                  } else if (s === 'Session') {
                    return "#1E9FFF"
                  } else{
                    return "red";
                  }
                },
                borderWidth: 0,//设置border宽度
                borderColor: '#DCEDFF',
              }
            },
          }
        ]
      };
      myChart.setOption(option);
    },
    getSevenCount(res) {
      const myChart = echarts.init(this.$refs.block1);
      // 设置配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: "{a} <br/>{b} : {c}次",
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: res.x,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name:"处理请求次数",
          data: res.y,
          type: 'bar',
          itemStyle : {
            normal: {
              label : {show: true},

              color:'green' //折线颜色

            }
          }
        },{
          name:"处理请求次数",
          data: res.y,
          type: 'line',
          smooth: true,
          itemStyle : {
            normal: {
              label : {show: true},
              lineStyle:{
                color:'red' //折线颜色
              }
            }
          }
        }]
      };
      myChart.setOption(option);
    },
  }
}
</script>
<style scoped>

</style>
